<template>
	<view class="content">
		<!-- 遮罩 -->
		<view class="mark1" v-if="isLandScape">
			<image src="../../static/tip-heng2.png" class="tip-heng"></image>
		</view>


<!-- @scrolltolower="lower" -->
		<scroll-view v-else :scroll-x="isSrcoll" @scroll="scroll" :scroll-left="obj.left"
			:style="{'height':keyongH+'px'}" class="huoche-rongqi" :scroll-into-view="demoID" 
			
			@scrolltoupper="upper"
			lower-threshold="0"
			upper-threshold="5300">
			<view class="tian-piao-box" v-if="piaoShow">
				<view class="tian-piao animated fadeIn" :style="{'height':keyongH+'px','width':981*keyongH/600+'px'}">
					<!-- :style="{'height':keyongH*0.8+'px','width':'414px'}" -->
					<!-- <image src="../../static/che/chepiao.jpg" ></image> -->
					<input type="text" v-model="name" class="name-class" />
					<input type="text" v-model="wwid" class="wwid-class" />
					<view class="saveInfo" @click="surePiao" :style="isLandScape?{}:{'width':'506px','height':'64px','margin-left':'-258px','bottom': '-6px'}">
						
					</view>
				</view>
			</view>
			<view class="chexiang" id="demo1">
				
				<image src="../../static/che/xiaoshouBG_01.jpg"
					:style="{'height':keyongH+'px','width':353*keyongH/614+'px'}"></image>
			</view>
			
			<view class="chexiang" id="demo2">
				<view class="start start-donghua" @click="getChepiao"></view>
				<image src="../../static/che/xiaoshouBG_02.jpg"
					:style="{'height':keyongH+'px','width':728*keyongH/614+'px'}"></image>
			</view>
			<view class="chexiang" id="demo3">
				<image src="../../static/che/xiaoshouBG_03.jpg"
					:style="{'height':keyongH+'px','width':740*keyongH/614+'px'}"></image>
			</view>
			<view class="chexiang" id="demo4">
				<image src="../../static/che/xiaoshouBG_04.jpg"
					:style="{'height':keyongH+'px','width':1076*keyongH/614+'px'}"></image>
			</view>
			<view class="chexiang" id="demo5">
				<image src="../../static/che/xiaoshouBG_05.jpg"
					:style="{'height':keyongH+'px','width':996*keyongH/614+'px'}"></image>
			</view>
			<view class="chexiang" id="demo6" >
				<image src="../../static/che/xiaoshouBG_06.jpg"
					:style="{'height':keyongH+'px','width':1016*keyongH/614+'px'}"></image>
			</view>
			<view class="chexiang" id="demo7" @click="playVideo(videoArr[0])">
				<image src="../../static/che/xiaoshouBG_07.jpg"
					:style="{'height':keyongH+'px','width':589*keyongH/614+'px'}"></image>
			</view>
			<view class="chexiang" id="demo8" @click="playVideo(videoArr[1])">
				<image src="../../static/che/xiaoshouBG_08.jpg"
					:style="{'height':keyongH+'px','width':553*keyongH/614+'px'}"></image>
			</view>
			<view class="chexiang" id="demo9" @click="playVideo(videoArr[2])">
				<image src="../../static/che/xiaoshouBG_09.jpg"
					:style="{'height':keyongH+'px','width':543*keyongH/614+'px'}"></image>
			</view>
			<view class="chexiang" id="demo10" @click="playVideo(videoArr[3])">
				<image src="../../static/che/xiaoshouBG_10.jpg"
					:style="{'height':keyongH+'px','width':607*keyongH/614+'px'}"></image>
			</view>
			<view class="chexiang" id="demo11" @click="playVideo(videoArr[4])">
				<image src="../../static/che/xiaoshouBG_11.jpg"
					:style="{'height':keyongH+'px','width':589*keyongH/614+'px'}"></image>
			</view>
			<view class="chexiang" id="demo12" @click="playVideo(videoArr[5])">
				<image src="../../static/che/xiaoshouBG_12.jpg"
					:style="{'height':keyongH+'px','width':548*keyongH/614+'px'}"></image>
			</view>
			<view class="chexiang" id="demo13" @click="playVideo(videoArr[6])">
				<image src="../../static/che/xiaoshouBG_13.jpg"
					:style="{'height':keyongH+'px','width':585*keyongH/614+'px'}"></image>
			</view>
			<view class="chexiang" id="demo13" @click="wenquandiaocha()">
				<image src="../../static/che/xiaoshouBG_14.jpg"
					:style="{'height':keyongH+'px','width':735*keyongH/614+'px'}"></image>
			</view>
			<view class="chexiang" id="demo14">
				<image src="../../static/che/xiaoshouBG_15.jpg"
					:style="{'height':keyongH+'px','width':673*keyongH/614+'px'}"></image>
			</view>
			<view class="chexiang" id="demo15">
				<image src="../../static/che/xiaoshouBG_16.jpg"
					:style="{'height':keyongH+'px','width':1009*keyongH/614+'px'}"></image>
			</view>
			<!-- <view class="chexiang" id="demo16">
				<image src="../../static/che/xiaoshouBG_16.jpg"
					:style="{'height':keyongH+'px','width':523*keyongH/614+'px'}"></image>
			</view> -->
			<!-- <view class="chexiang" id="demo17">
				<image src="../../static/che/xiaoshouBG_17.jpg"
					:style="{'height':keyongH+'px','width':856*keyongH/614+'px'}"></image>
			</view>
			<view class="chexiang" id="demo18">
				<image src="../../static/che/xiaoshouBG_18.jpg"
					:style="{'height':keyongH+'px','width':1044*keyongH/614+'px'}"></image>
			</view> -->
		</scroll-view>

		<view class="video-box" v-if="shipinShow">
			<video  :style="{'height':keyongH*0.9+'px','width':640*keyongH/368*0.9+'px'}" :src="videoSrc" controls v-if="shipinShow" ref="shipin"></video>
			<svg @click="close" t="1634453750819" class="icon" viewBox="0 0 1024 1024" version="1.1"
				xmlns="http://www.w3.org/2000/svg" p-id="2381" width="40" height="40">
				<path
					d="M512.001 15.678C237.414 15.678 14.82 238.273 14.82 512.86S237.414 1010.04 512 1010.04s497.18-222.593 497.18-497.18S786.589 15.678 512.002 15.678z m213.211 645.937c17.798 17.803 17.798 46.657 0 64.456-17.798 17.797-46.658 17.797-64.456 0L512.001 577.315 363.241 726.07c-17.799 17.797-46.652 17.797-64.45 0-17.804-17.799-17.804-46.653 0-64.456L447.545 512.86 298.79 364.104c-17.803-17.798-17.803-46.657 0-64.455 17.799-17.798 46.652-17.798 64.45 0l148.761 148.755 148.755-148.755c17.798-17.798 46.658-17.798 64.456 0 17.798 17.798 17.798 46.657 0 64.455L576.456 512.86l148.756 148.755z m0 0"
					p-id="2382" fill="#1296db"></path>
			</svg>
		</view>
		<view class="video-box" v-if="picShow">
			<!-- <video class="shipin" :src="videoSrc" controls v-if="shipinShow" ref="shipin"></video> -->
			<image :src="videoSrc"  :style="{'height':keyongH*0.9+'px','width':640*keyongH/368*0.9+'px'}"></image>
			<svg @click="close1" t="1634453750819" class="icon" viewBox="0 0 1024 1024" version="1.1"
				xmlns="http://www.w3.org/2000/svg" p-id="2381" width="40" height="40">
				<path
					d="M512.001 15.678C237.414 15.678 14.82 238.273 14.82 512.86S237.414 1010.04 512 1010.04s497.18-222.593 497.18-497.18S786.589 15.678 512.002 15.678z m213.211 645.937c17.798 17.803 17.798 46.657 0 64.456-17.798 17.797-46.658 17.797-64.456 0L512.001 577.315 363.241 726.07c-17.799 17.797-46.652 17.797-64.45 0-17.804-17.799-17.804-46.653 0-64.456L447.545 512.86 298.79 364.104c-17.803-17.798-17.803-46.657 0-64.455 17.799-17.798 46.652-17.798 64.45 0l148.761 148.755 148.755-148.755c17.798-17.798 46.658-17.798 64.456 0 17.798 17.798 17.798 46.657 0 64.455L576.456 512.86l148.756 148.755z m0 0"
					p-id="2382" fill="#1296db"></path>
			</svg>
		</view>
		
		<view class="video-box" v-if="picShow1">
			<view class="wendamianban"  :style="{'height':keyongH*0.9+'px','width':640*keyongH/368*0.9+'px'}" v-for="(i,index) in ananArr" :key="index" v-if="index==current?true:false">
				<text>{{(index+1)+'.'+i.timu}}</text>
				<textarea v-model="ananArr[index].daan" placeholder="" :auto-height="true"/>
				<button type="primary" size="mini" @click="xiayiti(ananArr[index].daan)" v-if="current!==2">下一题</button>
				<button type="primary" size="mini" @click="tijiao(ananArr[index].daan)" v-else>提 交</button>
			</view>
			<svg @click="close2" t="1634453750819" class="icon" viewBox="0 0 1024 1024" version="1.1"
				xmlns="http://www.w3.org/2000/svg" p-id="2381" width="40" height="40">
				<path
					d="M512.001 15.678C237.414 15.678 14.82 238.273 14.82 512.86S237.414 1010.04 512 1010.04s497.18-222.593 497.18-497.18S786.589 15.678 512.002 15.678z m213.211 645.937c17.798 17.803 17.798 46.657 0 64.456-17.798 17.797-46.658 17.797-64.456 0L512.001 577.315 363.241 726.07c-17.799 17.797-46.652 17.797-64.45 0-17.804-17.799-17.804-46.653 0-64.456L447.545 512.86 298.79 364.104c-17.803-17.798-17.803-46.657 0-64.455 17.799-17.798 46.652-17.798 64.45 0l148.761 148.755 148.755-148.755c17.798-17.798 46.658-17.798 64.456 0 17.798 17.798 17.798 46.657 0 64.455L576.456 512.86l148.756 148.755z m0 0"
					p-id="2382" fill="#1296db"></path>
			</svg>
		</view>
		<view class="video-box" v-if="picShow2">
			<image src="../../static/jieshuyu.jpg" class="jieshuyu" :style="{'height':keyongH*0.9+'px','width':446*keyongH/368*0.9+'px'}" ></image>
			<!-- <view class="wendamianban"  >
				<view class="">
					时光是一趟带我们渐行渐远的列车，<br>
				十年轮回，流体明胶交织出延绵悠久的岁月，<br>
				SURGIFLO在大家共同的努力下走过了荣耀的10年，本次SURGIFLO十周年之旅即将到达目的地，由衷感谢各位销售伙伴的一路同行，并给予了本次活动大力支持，再次致谢。<br>
				后续本次活动为大家定制了专属的专家感谢信，请各位销售伙伴留意活动信息。<br>
				SURGIFLO十周年之际，发起倾听召集，您认为的“SURGIFLO”有着什么含义，“SURGIFLO的未来，由我定义”为Surgiflo正式起一个响亮的中文产品名。
				</view>
				
			</view> -->
			<svg @click="close3" t="1634453750819" class="icon" viewBox="0 0 1024 1024" version="1.1"
				xmlns="http://www.w3.org/2000/svg" p-id="2381" width="40" height="40">
				<path
					d="M512.001 15.678C237.414 15.678 14.82 238.273 14.82 512.86S237.414 1010.04 512 1010.04s497.18-222.593 497.18-497.18S786.589 15.678 512.002 15.678z m213.211 645.937c17.798 17.803 17.798 46.657 0 64.456-17.798 17.797-46.658 17.797-64.456 0L512.001 577.315 363.241 726.07c-17.799 17.797-46.652 17.797-64.45 0-17.804-17.799-17.804-46.653 0-64.456L447.545 512.86 298.79 364.104c-17.803-17.798-17.803-46.657 0-64.455 17.799-17.798 46.652-17.798 64.45 0l148.761 148.755 148.755-148.755c17.798-17.798 46.658-17.798 64.456 0 17.798 17.798 17.798 46.657 0 64.455L576.456 512.86l148.756 148.755z m0 0"
					p-id="2382" fill="#1296db"></path>
			</svg>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current:0,
				isLandScape: true,
				keyongH: '',
				isSrcoll: false,
				piaoShow: false,
				picShow1:false,
				picShow2:false,
				name: '',
				wwid: '',
				demoID: '',
				obj: {
					left: 0
				},
				shipinShow: false,
				picShow:false,
				videoSrc: '',
				videoArr:[
					'https://7463-tcb-5s1jabgw702434-6drh810d420cd-1304347316.tcb.qcloud.la/周跃.mp4',
					'https://7463-tcb-5s1jabgw702434-6drh810d420cd-1304347316.tcb.qcloud.la/朱巍.mp4',
					'https://7463-tcb-5s1jabgw702434-6drh810d420cd-1304347316.tcb.qcloud.la/岳树源.mp4',
					'https://7463-tcb-5s1jabgw702434-6drh810d420cd-1304347316.tcb.qcloud.la/李峰.mp4',
					'https://7463-tcb-5s1jabgw702434-6drh810d420cd-1304347316.tcb.qcloud.la/配置高效使用方便.mp4',
					'https://7463-tcb-5s1jabgw702434-6drh810d420cd-1304347316.tcb.qcloud.la/高效止血直达缝隙.mp4',
					'https://7463-tcb-5s1jabgw702434-6drh810d420cd-1304347316.tcb.qcloud.la/精准定位直入深腔.mp4',
					// 'https://7463-tcb-5s1jabgw702434-6drh810d420cd-1304347316.tcb.qcloud.la/嵌套序列-14.gif'
				],
				wentiArr:[
					'流体最能区别于其他止血产品的优势是？（可以从材质/工艺/感触/装置设备/使用体验等方面进行具体描述）',
					'流体给外科止血领域带来的价值是？' ,
					'流体给医生的临床获益是？',
					'流体在医生的临床工作中承担着什么样的角色？',
					'流体能让医生联想到的形象是？ ',
					'流体使用上能给医生什么情感的感受及支持？',
					'流体的品牌愿景及长远的目标应该是？',
					'若将流体比喻为人，您认为他的性格是？',
					'爱惜康及止血产品线给您或外部的形象是？',
					'您觉得流体在中文命名上和爱惜康其他止血产品保持相似的基调好吗，为什么？'
				],
				ananArr:[
					{
						timu:'',
						daan:''
					},
					{
						timu:'',
						daan:''
					},
					{
						timu:'',
						daan:''
					},
				],
				flag: 0,
				shake: 2000,
				last_update: 0,
				x: 0,
				y: 0,
				z: 0,
				last_x: 0,
				last_y: 0,
				last_z: 0,
			}
		},
		computed: {
			/* cup() {
				if (this.isSrcoll) {
					return 'scroll'
				} else {
					return 'hidden'
				}
			} */
		},
		onLoad() {
			let arr = [0,1,2,3,4,5,6,7,8,9];
									    let out = [];
									    let num = 3;
									while(out.length < num){
									     let temp = (Math.random()*arr.length) >> 0;
									     out.push(arr.splice(temp,1));
									 }
			console.log(this.wentiArr[out[0]] )
			console.log(this.wentiArr[out[1]] )
			console.log(this.wentiArr[out[2]] )
			this.ananArr[0].timu = this.wentiArr[out[0]]
			this.ananArr[1].timu = this.wentiArr[out[1]]
			this.ananArr[2].timu = this.wentiArr[out[2]]
			let gif = new Image()
			gif.src = this.videoArr[7]
			// gif.onload
			let webSrc = location.href
			console.log(webSrc)
			if (webSrc.split('?')[1]) {
				//前往教授端
				console.log('教授端')
				let info = webSrc.split('?')[1]
				let UID = info.split('=')[1]
				uni.setStorageSync('uid', UID)
				uni.redirectTo({
					url:'../jiaoshou/jiaoshou'
				})
			} else {
				//前往销售端
				console.log('销售端')
			}
			uni.getSystemInfo({
				success: (res) => {
					console.log(res.windowHeight)
					if (res.windowHeight < res.windowWidth) {
						this.isLandScape = false
						this.keyongH = res.windowHeight
					} else {
						this.isLandScape = true
						console.log('可使用窗口高度', res.windowHeight)
						this.keyongH = res.windowHeight

					}
				}
			})
			window.addEventListener("resize", (event) => {
				uni.getSystemInfo({
					success: (res) => {
						console.log(res.windowHeight)
						if (res.windowHeight < res.windowWidth) {
							this.isLandScape = false
							this.keyongH = res.windowHeight
						} else {
							this.isLandScape = true
							console.log('可使用窗口高度', res.windowHeight)
							this.keyongH = res.windowHeight
							// this.shipinShow = false
							this.$refs.shipin.pause()
						}
					}
				})
			}, false);
			
		},
		methods: {
			getChepiao() {
				// this.isSrcoll = true
				console.log(this.isSrcoll)
				this.piaoShow = true
			},
			scroll(e) {
				// console.log(e.detail.scrollLeft)
				this.obj.left = e.detail.scrollLeft
				if(e.detail.scrollLeft == 0){
					
				}else{
					
				}
			},
			surePiao() {
				
				if (this.name!=='' && this.wwid!=='') {
					uniCloud.callFunction({
						name:'login',
						data:{name:this.name,wwid:Number(this.wwid)}
					}).then((res)=>{
						console.log(res)
						// debugger
						if (res.result.total>0) {
							this.piaoShow = false
							this.isSrcoll = true
							// this.obj.left = 557
							this.obj.left = 565
							uni.setStorageSync('name',this.name)
							uni.setStorageSync('wwid',this.wwid)
						} else{
							uni.showToast({
								title:'用户信息错误',
								icon:'error',
								mask:true
							})
							this.name = ''
							this.wwid = ''
						}
					})
					
					
					
				} else{
					uni.showToast({
						title:'请填写完整个人信息',
						icon:'none',
						mask:true
					})
				}
			},
			playVideo(index) {
				this.shipinShow = true
				this.videoSrc = index
			},
			close() {
				this.shipinShow = false
				this.videoSrc = ''
			},
			playVideo1(index) {
				this.picShow = true
				this.videoSrc = index
			},
			wenquandiaocha() {
				this.picShow1 = true
				    
			},
			xiayiti(txt){
				if (txt!=='') {
					this.current++
				} else{
					uni.showToast({
						title:'请填写内容',
						icon:'error',
						mask:true
					})
				}
				
			},
			tijiao(txt){
				if (txt!=='') {
					uni.showLoading({
					title:'正在提交',
					mask:true
				})
				uniCloud.callFunction({
					name:'wenjuandiaocha',
					data:{name:this.name,wwid:this.wwid,diaocha:this.ananArr}
				}).then((res)=>{
					console.log(res)
					uni.hideLoading()
					uni.showToast({
						title:'提交成功',
						icon:'success',
						mask:true,
						success: (res) => {
							this.picShow1 = false
							this.picShow2 = true
							this.current = 0
						}
					})
				})
				} else{
					uni.showToast({
						title:'请填写内容',
						icon:'error',
						mask:true
					})
				}
				
				console.log(this.ananArr)
			},
			close1() {
				this.picShow = false
				this.videoSrc = ''
			},
			close2() {
				this.picShow1 = false
			},
			close3(){
				this.picShow2 = false
			},
			/* lower(e) {
				console.log('e', e)
				console.log('触发到底0了')
				uni.showModal({
					content:'是否前往制作感谢信',
					showCancel:true,
					success: (res) => {
						if (res.confirm) {
							uni.redirectTo({
					url:'../letter/letter'
				})
						}
					}
				})
				// this.iosGrantedTips()
				
			}, */
			upper(e) {
				console.log('e', e)
				console.log('触发到左边4100了')
				// alert('摇一摇')
				// this.iosGrantedTips()
			},

			deviceMotionHandler(eventData) {
				if (this.flag == 0) {
					var acceleration = eventData.accelerationIncludingGravity,
						currTime = new Date().valueOf(),
						diffTime = currTime - this.last_update;

					if (diffTime > 100) {
						this.last_update = currTime;
						this.x = acceleration.x;
						this.y = acceleration.y;
						this.z = acceleration.z;
						var speed = Math.abs(this.x + this.y + this.z - this.last_x - this.last_y - this.last_z) /
							diffTime * 10000
						if (speed > this.shake) {
							// alert("中奖了")
							//定义自己的方法
							/* 摇一摇视频 */
							this.shipinShow = true
							this.videoSrc = 'https://7463-tcb-rmoynevz0f9f9b-6drpw11025b04-1304347316.tcb.qcloud.la/WeChat_20180527085115.mp4'
							// this.$refs.shipin.play()
							
						}
						this.last_x = this.x;
						this.last_y = this.y;
						this.last_z = this.z;
					}
				}

			},
			iosGrantedTips() {
				var ua = navigator.userAgent.toLowerCase();
				if (ua.indexOf("like mac os x") > 0) {
					var reg = /os [\d._]*/gi;
					var verinfo = ua.match(reg);
					var version = (verinfo + "").replace(/[^0-9|_.]/ig, "").replace(/_/ig, ".");
					var arr = version.split(".");
					if (arr[0] > 12 && arr[1] > 2) { //对13.3以后的版本处理,包括13.3,

						DeviceMotionEvent.requestPermission()

							.then(permissionState => {

								if (permissionState === 'granted') {
									window.addEventListener('devicemotion', this.deviceMotionHandler, true)

								}
								//
							})

							.catch((err) => {

								//alert("用户未允许权限")

								//======这里可以防止重复授权，需要改动，因为获取权限需要点击事件才能触发，所以这里可以改成某个提示框===//
								alert("由于IOS系统需要手动获取访问动作与方向的权限，为了保证游戏正常运行，请在访问提示中点击允许！")
								this.ios13granted()

							});

					} else { //13.3以前的版本
						window.addEventListener('devicemotion', this.deviceMotionHandler, true)
					}
				} else {
					// alert('安卓手机')
					window.addEventListener('devicemotion', this.deviceMotionHandler, true)
				}
			},
			ios13granted() {
				DeviceMotionEvent.requestPermission().then((permissionState) => {
					if (permissionState === 'granted') {
						window.addEventListener('devicemotion', this.deviceMotionHandler, true);
					}
				}).catch((error) => {
					alert(error)
				})
			},
			click() {
				this.iosGrantedTips() //这里一定是用户主动去点击按钮才能触发
			}



		}
	}
</script>

<style scoped lang="scss">
	.mark1 {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: #000;
		/* background: url(../../static/tip-shu.jpg) no-repeat center center;
		background-size: 100% 100%; */
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
	}




	.chexiang {
		height: 100%;
		display: inline-block;
		position: relative;
	}

.gifpic{
	/* width: 640px;
	height: 368px; */
}


	.huoche-rongqi {
		white-space: nowrap;
		width: 100%;
		position: relative;
	}

	.start {
		/* width: 4.4%;
		height: 6.2%; */
		background: url(../../static/che/111111111.png) no-repeat center center;
		background-size: 100% 100%;
		/* left: 49.2%;
		top: 73.3%; */
		left: 47.5%;
		top: 69.8%;
		width: 7.14%;
		height: 8.46%;
		
		position: absolute;
		border-radius: 50%;
		z-index: 90;
	}

	.start-box {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.start-1 {
		background: rgba(235, 138, 25, 0.55);
		width: 100%;
		height: 100%;
		border-radius: 50%;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 1;
	}

	.start-2 {
		background: rgba(235, 138, 25, 0.75);
		width: 65%;
		height: 65%;
		border-radius: 50%;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 2;
	}

	.start-3 {
		background: rgba(235, 138, 25, 1);
		width: 30%;
		height: 30%;
		border-radius: 50%;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 3;
	}

	.start-donghua {
		animation: daxiao 0.6s infinite ease-in;
	}

	@keyframes daxiao {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.4);
		}

		100% {
			transform: scale(1);
		}
	}

	.tian-piao-box {
		position: absolute;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .8);
		z-index: 100;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.tian-piao {
		/* width: 818rpx;
		height: 500rpx; */
		background: url(../../static/che/chepiao1.png) no-repeat center center;
		background-size: 100% 100%;
		border-radius: 26rpx;
		overflow: hidden;
		position: relative;
		transform: scale(0.9) !important;
	}

	.name-class {
		width: 22.8%;
		height: 7%;
		position: absolute;
		left: 38.3%;
		top: 70%;
		font-size: 18px;
		color: #555555;
		/* border: 1px solid #007AFF; */
	}

	.wwid-class {
		width: 22.8%;
		height: 7%;
		position: absolute;
		left: 76.5%;
		top: 70%;
		font-size: 18px;
		color: #555555;
	}

	.video-box {
		position: absolute;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .8);
		z-index: 100;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.shipin {
		position: relative;
		overflow: inherit;
		/* width: 640px;
		height: 368px; */
	}

	/* .shipin::before{
		content: '';
		position: absolute;
		right: -40rpx;
		top: 0;
		width: 40rpx;
		height: 40rpx;
		background: url(../../static/close.png) no-repeat center center;
		background-size: 100% auto;
		z-index: 101;
	} */
	
	.saveInfo{
		width: 468rpx;
		height: 60rpx;
		background: url(../../static/che/infoButton.png) no-repeat center center;
		background-size: 100% auto;
		position: absolute;
		bottom: -6rpx;
		left: 50%;
		margin-left: -234rpx;
		transform: scale(0.7);
		opacity: 0;
	}
	.tip-heng{
		width: 552rpx;
		height: 386rpx;
		/* z-index: 1000; */
	}
	.wendamianban{
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #fff;
		border-radius: 20rpx;
		text{
			width: 80%;
			margin-top: 30rpx;
			color: #333333;
			font-size: 16px;
			line-height: 22px;
		}
		textarea{
			width: 74%;
			padding: 10rpx 10rpx;
			margin-top: 10rpx;
			border: 1px dashed #999;
			border-radius: 20rpx;
			max-height: 100rpx;
		}
		button{
			margin-top: 26rpx;
		}
		view{
			padding: 20rpx;
			font-size: 28rpx;
			line-height: 44rpx;
		}
	}
	.jieshuyu{
		/* height: 100%;
		width: 100%; */
		display: block;
	}
</style>
